import React, { Component } from 'react';
import './Header.less'
import storageUtils from "../../utils/storageUtils"
import { Modal, Button } from 'antd';
import { withRouter } from "react-router-dom"
import { JsonpRequest } from "../../api/index"
import menusConfig from "../../config/menusConfig"

const { confirm } = Modal;
class Header extends Component {
    state = {
        currentTime: new Date().toLocaleString(),
        weather: {},
    }

    showConfirm = () => {
        // 设置弹窗的属性
        confirm({
            title: '信息提醒',
            content: "确定退出登录吗？",
            okText: "确认",
            cancelText: "取消",
            centered: true,
            onOk: () => {
                this.props.history.push("/login");
                storageUtils.removeUser();
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }


    //异步的方法在componentDidMount钩子函数中执行
    componentDidMount() {
        // this.getWeather("深圳");
        this.getTitle();
        this.getTime();

    }
    componentWillUnmount() {
        clearInterval(this.timer);
    }

    //获取时间
    getTime() {
        this.timer = setInterval(() => {
            this.setState({
                currentTime: new Date().toLocaleString()
            })
        }, 1000)
    }

    // 获取天气
    getWeather = async (city) => {
        const result = await JsonpRequest(city)
        this.setState({
            weather: result
        })
    }

    // 获取标题
    getTitle = () => {
        var title=""
        menusConfig.forEach(item=>{
            if(item.key===this.props.location.pathname){
                title=item.title;
            }
            if(item.children){
                item.children.forEach(citem=>{
                    if(this.props.location.pathname.includes(citem.key)){
                        title=citem.title;
                    }
                })
            }
        })
        return title;   
    }

    render() {
        const user = storageUtils.getUser();

        // 解构天气的参数
        // const { dayPictureUrl, weather, wind, temperature, city } = this.state.weather;
    

        return (
            <div className="header">
                <div className="header-top">
                    <span>欢迎,{user.userName}</span>
                    <Button onClick={this.showConfirm}>退出</Button>
                </div>
                <div className="header-bottom">
                    <span className="header-bottom-left">{this.getTitle()}</span>
                    <div className="header-bottom-right">
                        <span>{this.state.currentTime}</span>
                        {/* <span>{city}</span>
                        <img alt="" src={dayPictureUrl} />
                        <span>{weather}</span>
                        <span>{temperature}</span>
                        <span>{wind}</span> */}
                    </div>
                </div>
            </div>
        );
    }
}

export default withRouter(Header)